<template>
  <div id="comment">
    <div>
      <span class="bold">{{this.type}}</span>
      <i class="el-icon-info"></i>
    </div>
    <div class="comment-content" v-if="isShowReply">
      <el-input
        type="textarea"
        :autosize="{ minRows: 4, maxRows: 8}"
        placeholder="说点什么吧~"
        resize="none"
        maxlength="1000"
        show-word-limit
        v-model="form.content">
      </el-input>
      <div class="comment-title mt-10 tr">
        <div v-if="this.$store.getters.token" class="user tl">
        </div>
        <el-row v-else class="tl inline-block">
          <el-col :span="12" class="mr-10">
            <el-input v-model="form.nickname" size="mini" placeholder="昵称" maxlength="10"
                      show-word-limit></el-input>
          </el-col>
          <el-col :span="12">
            <el-input v-model="form.contact" size="mini" placeholder="Email" maxlength="30"
                      show-word-limit></el-input>
          </el-col>
        </el-row>
        <el-button class="comment-btn" type="primary" size="mini" @click="onReply">{{this.type}}</el-button>
      </div>
    </div>
    <div class="comment-list" v-if="this.comments.list">
      <div class="list-count">
        <span>已有{{this.comments.pagination.total}}条{{this.type}}</span>
      </div>
      <el-form ref="form" :model="form" label-width="0" size="mini">
        <el-form-item v-for="(item, key) in this.comments.list" :key="key">
          <template>
            <dt :id="item.id">
              <el-avatar class="avatar" :src="avatar" v-if="item.userId === 1"></el-avatar>
              <el-avatar class="avatar" :src="item.avatar" v-else-if="item.avatar != ''"></el-avatar>
              <el-avatar class="avatar" icon="el-icon-third-person" v-else></el-avatar>
              <div class="content">
                <el-button size="mini" type="text">{{ item.nickname }}</el-button>
                <span class="opacity-5">
                  <span>{{formatTime(item.createTime)}}</span>
                  <span><el-button size="mini" title="" type="text" ref="replyText"
                                   @click="showReply($event, key, item, false)">回复</el-button></span>
                </span>
                <span><pre>{{ item.content }}</pre></span>
              </div>
            </dt>
            <template v-if="item.children.length > 0" v-for="v in item.children">
              <dd class="children" :id="v.id">
                <el-avatar class="avatar" :src="avatar" v-if="v.userId === 1"></el-avatar>
                <el-avatar class="avatar" :src="v.avatar" v-else-if="v.avatar != ''"></el-avatar>
                <el-avatar class="avatar" icon="el-icon-third-person" v-else></el-avatar>
                <div class="content">
                  <el-button size="mini" type="text" :style="v.userId === 1 ? 'color:red;font-weight:bold;' : ''">{{v.nickname}}</el-button>
                  <span class="opacity-5">
                    <span>{{formatTime(v.createTime)}}</span>
                    <span><el-button size="mini" title="" type="text"
                                     @click="showReply($event, key, v, true)">回复</el-button></span>
                  </span>
                  <div>
                    <span class="opacity-5" v-if="item.id !== v.replyId">@{{v.replyNickname}}</span>
                    <span><pre>{{ v.content }}</pre></span>
                  </div>
                </div>
              </dd>
            </template>
            <div class="reply" ref="replyId" v-show="false">
              <el-input
                type="textarea"
                :autosize="{ minRows: 2, maxRows: 4}"
                :placeholder="`@${replyNickname}`"
                resize="none"
                maxlength="500"
                show-word-limit
                v-model="form.content">
              </el-input>
              <div class="comment-title mt-10 tr">
                <el-row v-if="isLogin === false" class="tl inline-block">
                  <el-col :span="12" class="mr-10">
                    <el-input v-model="form.nickname" size="mini" placeholder="昵称" maxlength="10"
                              show-word-limit></el-input>
                  </el-col>
                  <el-col :span="12">
                    <el-input v-model="form.contact" size="mini" placeholder="Email" maxlength="30"
                              show-word-limit></el-input>
                  </el-col>
                </el-row>
                <el-button class="comment-btn" type="primary" size="mini" plain @click="onReply">回复
                </el-button>
              </div>
            </div>
          </template>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'Comment',
    props: {
      type: null,
      articleId: null,
      comments: null,
      pagination: null
    },
    data() {
      return {
        form: {
          userId: 0,
          content: '',
          nickname: '',
          contact: '',
        },
        isShowReply: true,
        replyId: 0,
        replyTid: 0,
        replyNickname: '',
        replyIndex: 0,
        replyText: '',
        isLogin: false,
        event: null,
        avatar: require("../assets/img/avatar.jpg")
      }
    },
    methods: {
      async onReply() {
        if (this.form.content === '') {
          this.$message.error('请填写内容')
          return
        }
        if (!this.$store.getters.token) {
          if (this.form.nickname === '') {
            this.$message.error('请填写昵称')
            return
          }
          let regEmail = /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/
          if (this.form.contact === '' || !regEmail.test(this.form.contact)) {
            this.$message.error('请填写正确的email')
            return
          }

          let data = {
            nickname: this.form.nickname,
            contact: this.form.contact,
            contactType: 2,
          }
          // let res = await this.$api.login(this.$common.filterParam(data))
          let res = {"token":"/qr7CqMo5LAKdeGXl2kFvG87F4joXryEt1hivv0y1SM=","userInfo":{"avatar":"http://cdn.itspire.cn/avatar_1602748921550_1597302549650.jpg","nickname":"test2"}}
          this.$store.dispatch('setLogin', res)
          this.isLogin = true
        }

        let data = {
          pid: this.replyId,
          tid: this.replyTid,
          userId: this.form.userId,
          articleId: this.articleId,
          content: this.form.content,
        }

        const loading = this.openLoading();
        // await this.$api.commentsCreate(this.$common.filterParam(data))
        loading.close();
        this.$emit('getCommentList')
        this.$message.success(this.type + '成功~')
        this.resetForm()
      },
      showReply(event, index, row, child) {
        if (this.replyId != row.id && this.replyId > 0) {
          return
        }
        let text = event.target.innerText
        if (text === '回复') {
          let replyId = this.$refs.replyId
          this.replyIndex = index
          this.replyId = row.id
          this.replyTid = row.tid
          this.replyNickname = row.nickname
          this.comments.list.forEach(function (item, key) {
            if (child && key === index) {
              replyId[key].style.paddingLeft = '30px'
            } else {
              replyId[key].style.paddingLeft = 'unset'
            }
            replyId[key].style.display = key === index ? 'block' : 'none'
          })
          event.target.innerText = '取消'
          this.isShowReply = false
        } else {
          this.resetForm()
        }
        this.event = event
      },
      resetForm() {
        this.form = {
          userId: 0,
          content: '',
          nickname: '',
          contact: '',
        }
        if (this.$refs.replyId !== undefined) {
          this.$refs.replyId[this.replyIndex].style.display = 'none'
        }
        this.replyId = 0
        this.isShowReply = true
        if (this.event) {
          this.event.target.innerText = '回复'
        }
      },
      handleCurrentChange(val) {
        this.$emit('getCommentList', val)
      },
      formatTime(timestamp) {
        return this.$common.formatDate(timestamp)
      },
    },
    mounted() {
      this.$store.getters.token && (this.isLogin = true)
    }
  }

</script>

<style scoped>
  #comment {
    padding: 15px 20px 5px;
    text-align: left;
  }

  .comment-content {
    padding: 10px 0;
  }

  .comment-title {
    display: flex;
    justify-content: space-between;
  }

  .comment-title .user {
    line-height: 28px;
    display: flex;
  }

  .el-avatar {
    width: 28px;
    height: 28px;
    margin-right: 5px;
  }

  .comment-title .el-row {
    width: -webkit-calc(100% - 50px);
    width: -moz-calc(100% - 50px);
    width: calc(100% - 50px);
  }

  .comment-title .el-row .el-col {
    width: -webkit-calc(50% - 10px);
    width: -moz-calc(50% - 10px);
    width: calc(50% - 10px);
  }

  .comment-btn {
    opacity: 0.9;
    padding: 7px 12px;
  }

  .comment-list dt {
    border-top: 1px solid #f1f4f6;
    padding-top: 8px;
  }

  .comment-list dl {
    padding: 8px 0;
  }

  .comment-title .el-avatar {
    line-height: 30px;
  }

  .comment-list .el-avatar {
    width: 23px;
    height: 23px;
    line-height: 23px;
    margin-right: 5px;
    float: left;
  }

  .comment-list .content {
    display: inline-block;
    line-height: 18px;
    width: -webkit-calc(100% - 30px);
    width: -moz-calc(100% - 30px);
    width: calc(100% - 30px);
  }

  .comment-list .content .el-button {
    margin-top: 2px;
    padding: 3px 0;
    font-weight: normal;
  }

  .comment-list .children {
    padding-top: 7px;
    margin-left: 30px;
    border-top: 1px solid #f1f4f6;
  }

  .comment-list .reply {
    text-align: right;
    margin-bottom: 10px;
  }

  .comment-list .reply .comment-title {
    justify-content: start;
  }

  .comment-list .list-count {
    padding: 8px 0;
  }

  .el-form-item {
    margin-bottom: 0 !important;
  }

  .important {
    font-weight: 600;
    color: #ff0000;
    margin-right: 3px;
  }

  pre {
    margin: 0;
    white-space: pre-wrap; /* css-3 */
    white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
    white-space: -pre-wrap; /* Opera 4-6 */
    white-space: -o-pre-wrap; /* Opera 7 */
    word-wrap: break-word; /* Internet Explorer 5.5+ */
    word-break: break-all;
    overflow: hidden;
  }

</style>
